[자바스크립트] 선택자API, DOM요소, 노드의 선택방법 메서드

자바스크립트를 이용해 웹페이지안의 모든 요소들을 (DOM요소) 선택하는 방법에 대하여 알아보려합니다. 먼저 가능한 방법으로 아래의 방법들이 있습니다.

하나, DOM(문서객체모델) API 방법

document.getElementById();
document.getElementsByClassName();
document.getElementsByTagName();

둘, 선택자 API를 이용한 방법

document.querySelector()
위 메소드는 해당하는 첫번째 요소만 반환하며 만약 일치하는 요소가 없는 경우 null값을 반환합니다. 만약, 하나가 아닌 해당하는 모든 요소를 포함시키려면 아래의 메소드를 사용합니다.

document.querySelectorAll()
위 메소드는 해당하는 모든 요소를 반환하게됩니다.

위 방법들은 CSS 및 jQuery를 아는 사용자에게는 매우 친숙할 것입니다. 요소의 선택 방법이 CSS선택자나 제이쿼리 씨즐러 엔진 선택자와 매우 비슷합니다. 그럼 예제를 통해 조금 더 자세하게 알아보면...

!! 요소 선택 예제보기

i. 아이디(id)가 main인 요소를 선택하기

document.getElementById('main');

document.querySelector('#main');

ii. 클래스명이 testClass인 요소를 선택하기

document.document.getElementsByClassName('testClass');

document.querySelector('.testClass');

document.querySelectorAll('.testClass');
// testClass 클래스가 한개가 아닌 다수인 경우 위 메소드 사용

iii. div태그 요소를 선택하기

document.getElementsByTagName('div');

document.querySelector('div');

document.querySelectorAll('div');
// div 태그가 복수개, 즉 한개가 아닌 다수일 경우

!!! 참고로 jQuery 및 Prototype 프레임웍(framework)의 경우

i. jQuery(제이쿼리)를 사용하는 방법

ii. Prototype을 사용하는 방법